<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="/vendor/bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <title>Title</title>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2 h4">
            <ul class="nav nav-pills nav-stacked" th:each="menu : ${menus}">
                <li role="presentation"><a aria-controls="collapseExample" aria-expanded="false"
                                           data-toggle="collapse"
                                           target="myFrame"
                                           th:href="'#'+${menu.id}"
                                           th:text="'&gt;'+${menu.content}"></a></li>
                <li>
                    <ul class="nav nav-pills nav-stacked collapse" th:id="${menu.id}">
                        <li role="presentation" th:each="item : ${menu.childMenus}"><a
                                target="myFrame"
                                th:href="'/system/menuSet/'+${item.id}"
                                th:text="'&nbsp;&nbsp;&nbsp;&nbsp;'+ ${item.content}"></a>
                        </li>
                    </ul>
                </li>
            </ul>

        </div>
        <div class="col-lg-10">
            <iframe frameborder="0" height="500px" id="myFrame" name="myFrame" src="" width="100%"></iframe>
        </div>
    </div>
</div>
</body>
<script src="/vendor/jquery/jquery-3.5.1.min.js"></script>
<script src="/vendor/bootstrap-3.4.1/js/bootstrap.min.js"></script>
<script>
    $("ul>li").on("click", function (e) {
        let attr = $(this).attr("content");
        if (attr !== undefined) {

        }
    })
</script>
</html>